<template>
  <div class="container-fluid">
    <div class="row no-gutters">
      <div
        class="
          col-12 col-sm-10
          offset-sm-1
          col-md-8
          offset-md-2
          col-lg-6
          offset-lg-3
          col-xl-6
        "
        v-for="(item, index) in users"
        :key="item.id"
      >
        <div class="row">
          <div class="col-2 col-xl-1">
            <el-avatar
              :size="40"
              :src="getWriter(item.from).avatar"
            ></el-avatar>
          </div>

          <div class="col-10 col-xl-11">
            <div class="row">
              <div class="col-12 padding-5">
                <nick
                  id="writer"
                  @touch="visitUser(getWriter(item.from).id)"
                  :name="getWriter(item.from).nick"
                  :showTag="
                    writerId === getWriter(item.from).id && writerId !== -1
                  "
                >
                </nick>
              </div>

              <div class="col-12 padding-5">
                <span style="color: #9b9b9b">{{ item.time }}</span>
              </div>

              <div class="col-12 padding-5">
                <span v-if="item.to !== null">
                  回复
                  <nick
                  id="writer"
                    @touch="visitUser(getWriter(item.to).id)"
                    :name="getWriter(item.to).nick"
                    :showTag="
                      writerId === getWriter(item.to).id && writerId !== -1
                    "
                  >
                  </nick>
                  <span> : </span>
                </span>
                <span>{{ item.content }}</span>
              </div>

              <div class="col-12 padding-5 border-bottom">
                <div style="float: right">
                  <span class="icon" style="color: #41b883; cursor: pointer"
                    ><i class="iconfont icon-dianzan"></i> {{ item.likes }}
                  </span>

                  <el-popover
                    trigger="hover"
                    placement="top"
                    width="160"
                    :value="showDiscuss === index"
                  >
                    <p>
                      <el-input
                        v-model.trim="replayContent"
                        :placeholder="
                          ' 回复 ' + getWriter(item.from).nick + ' :'
                        "
                      ></el-input>
                    </p>
                    <div style="text-align: right; margin: 0">
                      <el-button
                        size="mini"
                        type="text"
                        @click="
                          showDiscuss = '';
                          replayContent = '';
                        "
                        >取消</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="
                          addReplay(commentId, getWriter(item.from).id);
                          showDiscuss = '';
                        "
                        >确定</el-button
                      >
                    </div>
                    <el-button
                      @click="showDiscuss = index"
                      type="text"
                      slot="reference"
                      ><span
                        class="icon"
                        style="color: #41b883; cursor: pointer"
                        ><i class="el-icon-chat-dot-round"></i> 回复
                      </span></el-button
                    >
                  </el-popover>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 padding-20" style="text-align: center">
        <span style="color: gray">暂无更多回复</span>
      </div>

      <div
        class="
          col-12 col-sm-10
          offset-sm-1
          col-md-8
          offset-md-2
          col-lg-6
          offset-lg-3
          col-xl-6
          fixed-bottom
          sticky-top
        "
      >
        <el-input v-model.trim="replayContent" placeholder="我也来说两句~">
          <el-button
            @click="addReplay(commentId, null)"
            type="text"
            slot="suffix"
            ><span style="color: #41b883; font-size: 14px"
              ><i class="el-icon-edit"></i>发表评论</span
            ></el-button
          >
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import Nick from "./Nick.vue";
import { fake } from "../../assets/fake";
export default {
  data() {
    return {
      replayContent: "",
      showDiscuss: "",
    };
  },
  props: {
    users: {
      type: Array,
      default: [],
    },
    writerId: {
      type: String,
      default: -1,
    },
    articleId: {
      type: String,
    },
    commentId: {
      type: String,
    },
  },
  methods: {
    visitUser(id) {
      this.$router.push({
        name: "User",
        query: {
          id: id,
        },
      });
    },
    getWriter(writerId) {
      writerId = writerId + "";
      return fake.methods.getUserInfo(writerId);
    },
    addReplay(commentId, to) {
      if (fake.self === null) {
        this.$alert("登录后才能回复", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      } else {
        if (this.replayContent !== "") {
          fake.methods.addReplay(
            fake.self.info.id,
            this.articleId,
            commentId,
            this.replayContent,
            to
          );
          this.$alert("回复成功", "提示", {
            confirmButtonText: "确定",
            type: "success",
          });
          this.replayContent = "";
        } else {
          this.$alert("不能回复空哦", "提示", {
            confirmButtonText: "确定",
            type: "warning",
          });
        }
      }
    },
  },
  components: {
    Nick,
  },
};
</script>

<style scoped>
.icon {
  font-size: 16px;
  color: #41b883;
  transition: all 0.3s;
}
.icon:hover {
  color: rgba(46, 215, 139, 0.753);
  cursor: pointer;
  transition: all 0.3s;
}
.discuss span {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.659);
}
.discussChildren {
  background-color: #eeeeee;
}
#writer {
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
}
#writer:hover {
  color: #41b883;
  transition: all 0.3s;
}
</style>